<template>
  <section class="rating_container" id="ratingContainer" v-show="changeShowType =='rating'">
    <section v-load-more="loaderMoreRating" type="2">
      <section>

        <header class="rating_header">
          <section class="rating_header_left">
            <p>{{shopDetailData.rating}}</p>
            <p>综合评价</p>
            <p>高于周边商家{{(ratingScoresData.compare_rating*100).toFixed(1)}}%</p>
          </section>
          <section class="rating_header_right">
            <p>
              <span>服务态度</span>
              <rating-star :rating='ratingScoresData.service_score'></rating-star>
              <span class="rating_num">{{ratingScoresData.service_score.toFixed(1)}}</span>
            </p>
            <p>
              <span>菜品评价</span>
              <rating-star :rating='ratingScoresData.food_score'></rating-star>
              <span class="rating_num">{{ratingScoresData.food_score.toFixed(1)}}</span>
            </p>
            <p>
              <span>送达时间</span>
              <span class="delivery_time">{{shopDetailData.order_lead_time}}分钟</span>
            </p>
          </section>
        </header>
        <ul class="tag_list_ul">
          <li v-for="(item, index) in ratingTagsList" :key="index" :class="{unsatisfied: item.unsatisfied, tagActivity: ratingTageIndex == index}" @click="changeTgeIndex(index, item.name)">{{item.name}}({{item.count}})</li>
        </ul>
        <ul class="rating_list_ul">
          <li v-for="(item, index) in ratingList" :key="index" class="rating_list_li">
            <img :src="getImgPath(item.avatar)" class="user_avatar">
            <section class="rating_list_details">
              <header>
                <section class="username_star">
                  <p class="username">{{item.username}}</p>
                  <p class="star_desc">
                    <rating-star :rating='item.rating_star'></rating-star>
                    <span class="time_spent_desc">{{item.time_spent_desc}}</span>
                  </p>
                </section>
                <time class="rated_at">{{item.rated_at}}</time>
              </header>
              <ul class="food_img_ul">
                <li v-for="(item, index) in item.item_ratings" :key="index">
                  <img :src="getImgPath(item.image_hash)" v-if="item.image_hash">
                </li>
              </ul>
              <ul class="food_name_ul">
                <li v-for="(item, index) in item.item_ratings" :key="index" class="ellipsis">
                  {{item.food_name}}
                </li>
              </ul>
            </section>
          </li>
        </ul>
      </section>
    </section>
  </section>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {}
  },
  methods: {},
  mounted() {}
}
</script>

<style scoped>
</style>